import React, { Component } from 'react';
import { loadModules, loadCss } from 'esri-loader';

const styles = {
    container: {
      height: '500px',
      width: '100%'
    },
    mapDiv: {
      padding: 0,
      margin: 0,
      height: '100%',
      width: '100%'
    },
}
loadCss('https://ags.geoportal.cn/4.11/esri/themes/light/main.css');

class MapEsri extends Component{

    constructor(props) {
        super(props);
        this.state = {}
    }
    
    componentDidMount() {
        loadModules(['esri/Map',
            'esri/views/MapView',
            "esri/layers/TileLayer",
            "esri/layers/GeoJSONLayer",
            "esri/layers/FeatureLayer",
            "esri/widgets/LayerList"], { url: 'https://ags.geoportal.cn/4.11/dojo/dojo.js' })
        .then(([Map, MapView, TileLayer, GeoJSONLayer, FeatureLayer, LayerList]) => {
            const map = new Map({ basemap: "streets" });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.71511, 34.09042],
                zoom: 11
            });
            view.when(function(){
                // All the resources in the MapView and the map have loaded. Now execute additional processes
            }, function(error){
                // Use the errback function to handle when the view doesn't load properly
                console.log("The view's resources failed to load: ", error);
            });

            // var baseLayer = new TileLayer({
            //     url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
            // });
            // map.add(baseLayer);

            var featureLayer = new FeatureLayer({
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
            });
            map.add(featureLayer);

            // Define a popup for Trails
            var popupTrails = {
                "title": "Trail Information",
                "content": function(){
                    return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
                }
            }
            // Create the layer and set the renderer
            var trails = new FeatureLayer({
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
                outFields: ["TRL_NAME","ELEV_GAIN"],
                popupTemplate: popupTrails
            });
            // Add the layer
            map.add(trails, 0);
            
            // 添加GeoJSON数据
            const geojsonLayer = new GeoJSONLayer({
                url: '/api/cities',
                popupTemplate: {
                    title: "City Info",
                    content: "这是 {name}"
                },
                copyright: "USGS Earthquakes"
            });
            map.add(geojsonLayer);

            view.when(function() {
                var layerList = new LayerList({
                    view: view
                });
                // Add widget to the top right corner of the view
                view.ui.add(layerList, "top-right");
            });
        })
    }
    
    render() {
        return(
            <div style={styles.container}>
                <div id='viewDiv' style={ styles.mapDiv } />
            </div>
        )
    }
}
export default MapEsri;